/* jshint esversion: 6 */

import React, { FC } from 'react';
import { NavBar, TabBar } from 'antd-mobile';

import {
    Route,
    useHistory,
    useLocation,
    MemoryRouter,
} from 'react-router-dom';
import {
    AppOutline,
    UserOutline,
} from 'antd-mobile-icons';
import styles from './Main.less';
import MySchedule from "../Oa/work/MySchedule";
import Work from "../Oa/work/Work";
import {PRIVATE_ROUTE} from "../../../route.constants";
import ScheduleAdd from "../Oa/work/ScheduleAdd";
import { createMemoryHistory} from "history";
import UserCheckBoxList from "../Oa/work/UserCheckBoxList";
import ScheduleEdit from "../Oa/work/ScheduleEdit";
import ScheduleView from "../Oa/work/ScheduleView";


const Bottom: FC = () => {
    const history = useHistory()
    const location = useLocation()
    const { pathname } = location

    const setRouteActive = (value: string) => {
        history.push(value)
    }

    const tabs = [
        {
            key: '/',
            title: '工作',
            icon: <AppOutline />,
        },
        {
            key: '/me',
            title: '个人中心',
            icon: <UserOutline />,
        },
    ]

    return (
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
            {tabs.map(item => (
                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
        </TabBar>
    )
}

export default function Main() {

    return (
        <>
            <MemoryRouter history={createMemoryHistory()} initialEntries={['/']}>

            <div className={styles.app}>
                <div className={styles.top}>
                </div>
                <div className={styles.body}>
                    <Route exact={true} path='/'>
                        <div style={{height: '100vh'}}>
                            <Work></Work>
                        </div>
                    </Route>
                    <Route exact={true} path={'/main/'+PRIVATE_ROUTE.APP_OA_WORK_SCHEDULE_MINE}>
                        <div style={{height: '100vh'}}>
                            <MySchedule/>
                        </div>
                    </Route>
                    <Route exact={true} path={'/main/'+PRIVATE_ROUTE.APP_OA_WORK_SCHEDULE_ADD}>
                        <div style={{height: '100vh'}}>
                            <ScheduleAdd/>
                        </div>
                    </Route>
                    <Route exact={true} path={'/main/'+PRIVATE_ROUTE.APP_OA_WORK_SCHEDULE_EDIT}>
                        <div style={{height: '100vh'}}>
                            <ScheduleEdit/>
                        </div>
                    </Route>
                    <Route exact={true} path={'/main/'+PRIVATE_ROUTE.APP_OA_WORK_SCHEDULE_VIEW}>
                        <div style={{height: '100vh'}}>
                            <ScheduleView/>
                        </div>
                    </Route>
                    <Route exact={true} path={'/main/'+PRIVATE_ROUTE.APP_OA_USER_CHECKBOX_LIST}>
                        <div style={{height: '100vh'}}>
                            <UserCheckBoxList/>
                        </div>
                    </Route>
                    <Route exact={true} path='/me'>
                        <div style={{height: '100vh'}}>
                         <PersonalCenter/>
                        </div>
                    </Route>
                </div>
                <div className={styles.bottom}>
                    <Bottom />
                </div>
            </div>
            </MemoryRouter>


        </>
    )
}





function PersonalCenter() {
    return <div>个人中心</div>
}